<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>个人中心</title>
</head>
<body style="padding-top: 70px;">
<jsp:include page="/topNav"></jsp:include>
<div class="container">
    <div class="row">
        <div class="col-xs-10">
            <ul id="myTab" class="nav nav-tabs">
                <li>
                    <a href="/Origami/account">
                        账号
                    </a>
                </li>
                <li class="active"><a href="/Origami/passwd">密码</a></li>
                <li><a href="/Origami/info">个人资料</a></li>
            </ul>
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade in active">
                    <div id="successAlert" class="alert alert-success" style="display: none">
                        <a href="#" class="close" data-dismiss="alert">&times;</a>
                        <strong>成功！</strong>修改成功。
                    </div>
                    <div id="failAlert" class="alert alert-warning" style="display: none">
                        <a href="#" class="close" data-dismiss="alert">&times;</a>
                        <strong>警告！</strong>修改失败。
                    </div>
                    <div role="form" style="width:30%;">
                        <h1></h1>

                        <label class="control-label" for="oldPasswd">原密码</label>&nbsp;&nbsp;&nbsp;&nbsp;<span id="oldpasswdmsg"
                                                                                                             style="color: #ff0000"></span>

                        <div class="required-field-block">
                            <input type="password" id="oldPasswd" name="oldPasswd" class="form-control" value=""
                                   style="margin-bottom: 15px;margin-top: 5px">

                        </div>

                        <label class="control-label" for="newPasswd">新密码</label>&nbsp;&nbsp;&nbsp;&nbsp;<span id="newPasswdmsg"
                                                                                                         style="color: #ff0000"></span>

                        <div class="required-field-block">
                            <input type="password" id="newPasswd" name="newPasswd" class="form-control" value=""
                                   style="margin-bottom: 15px;margin-top: 5px">

                        </div>

                        <label class="control-label" for="confnewPasswd">确认新密码</label>&nbsp;&nbsp;&nbsp;&nbsp;<span id="confnewPasswdmsg"
                                                                                                              style="color: #ff0000"></span>

                        <div class="required-field-block">
                            <input type="password" id="confnewPasswd" name="confnewPasswd" class="form-control" value=""
                                   style="margin-bottom: 15px;margin-top: 5px">

                        </div>

                        <button id="btn-changpasswd" type="button" class
                                ="btn btn-success"> 保存
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<link href="bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="bootstrap/user_defined.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="uploadify/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="js/userCenter.js"></script>
<script type="text/javascript">
    $('#btn-changpasswd').click(function () {
        if (changPasswd()) {
            $.ajax({
                url: "/Origami/changPasswd",
                type: "post",
                data: {newPasswd: $("#newPasswd").val()},
                dataType: "json",
                async: false,
                complete: function (data) {
                    if (data.responseText == "success") {
                        $("#successAlert").show();
                    } else {
                        $("#failAlert").show();
                    }
                }
            })
        }
    });
</script>
</html>